<template>
  <div class="map-container" ref="mapRef"></div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue';
import * as echarts from 'echarts';
import 'echarts-gl';
// import highPostJson from '@/assets/mapJson/gaoyou.json'; // 替换为你的高邮市 GeoJSON 文件路径
import highPostJson from '@/assets/mapJson/321084.json'; // 替换为你的高邮市 GeoJSON 文件路径

const mapRef = ref(null);

onMounted(() => {
  const myChart = echarts.init(mapRef.value);
  echarts.registerMap('highpost', highPostJson);

  const option = {
    backgroundColor: '#000', // 背景颜色
    geo: [
      {
        map: 'highpost',
        roam: true, // 允许缩放和平移
        layoutCenter: ['50%', '50%'],
        layoutSize: '100%',
        label: {
          show: true,
        },
        itemStyle: {
          areaColor: '#006edd',
          borderColor: '#fff',
          borderWidth: 1,
        },
        emphasis: {
          itemStyle: {
            areaColor: '#ffde93',
          },
        },
      },
      {
        type: 'map',
        map: 'highpost',
        zlevel: -1,
        layoutCenter: ['50%', '51%'],
        layoutSize: '100%',
        silent: true,
        itemStyle: {
          borderWidth: 1,
          borderColor: '#006edd',
          shadowColor: '#006edd',
          shadowOffsetY: 5,
          shadowBlur: 15,
          areaColor: '#006edd',
        },
      },
      {
        type: 'map',
        map: 'highpost',
        zlevel: -2,
        layoutCenter: ['50%', '52%'],
        layoutSize: '100%',
        silent: true,
        itemStyle: {
          borderWidth: 5,
          borderColor: '#006edd',
          shadowColor: '#006edd',
          shadowOffsetY: 15,
          shadowBlur: 10,
          areaColor: '#006edd',
        },
      },
    ],
  };

  myChart.setOption(option);

  // 监听窗口大小变化，重新渲染地图
  window.addEventListener('resize', () => {
    myChart.resize();
  });

  onUnmounted(() => {
    myChart.dispose();
    window.removeEventListener('resize', () => myChart.resize());
  });
});
</script>

<style scoped>
.map-container {
  width: 100%;
  height: 100vh; /* 根据需要调整高度 */
}
</style>